<template>
  <div class="edit-name">
    <!-- 头部 -->
    <van-nav-bar 
      left-text="取消" 
      right-text="确定" 
      title="修改昵称"
      @click-left="$emit('close')"
      @click-right="submit"
    />
    <!-- 输入框 -->
    <div class="field-wrap">
      <van-field 
        type="textarea" 
        maxlength="7" 
        placeholder="请输入昵称" 
        border 
        show-word-limit
        v-model="message"
        clearable
      />
    </div>
  </div>
</template>

<script>
  import { updateUserProfile } from '@/api/user'
  export default {
    name:'EditName',
    data() {
      return {
        message: this.name   // 讲props的数据赋给data
      }
    },
    props:{
      name:String
    },
    methods: {
      async  submit() {
        if(!this.message) return this.$toast.fail('请输入昵称')
        try {
          let { data:res } = await updateUserProfile({
            name:this.message
          })
          this.$toast.success('更新成功')
          // 更新视图
          this.$emit('close',res.data.name)
        } catch (error) {
          if(error.response.status === 409 ){
            return this.$toast.fail('昵称被占用')
          }
          this.$toast.fail('更新出错')
        }
      }
    },
  }
  // 需求： 修改props!
  // 思路： 
    // 思路1： 将props的数据一开始就覆盖data里面的变量
    // 思路2： 讲props通过 计算属性来设置
</script>

<style lang="less" scoped>
.field-wrap{
  margin:30px;
}
</style>